
import * as PIXI from 'pixi.js';
import Circle from 'components/circle';
import Arc from 'components/arc';
import Text from 'components/text';
import {findGameApp} from 'common/utils';
const { Container } = PIXI;


export default class Progress {
  constructor({parent, ...props}) {
    this.parent = parent;

    const { radius, showPercent } = props;

    this.container = new Container();

    this._renderProgress(props);

    if (showPercent) this._renderPercent(props);

    this.container.width = radius * 2;
    this.container.height = radius * 2;

    this.container.y = findGameApp(this).app.screen.height / 2 - radius; // 上下居中
    this.container.x = findGameApp(this).app.screen.width / 2 - radius; // 左右居中

  }

  _renderProgress = (data) => {
    const { radius, background, progress, innerColor } = data;
    let bgBar = new Circle({
      top: 0,
      left: 0,
      radius,
      borderWidth: 2,
      borderColor: background,
    });
    let progressBar = new Arc({
      top: 0,
      left: 0,
      radius,
      borderWidth: 2,
      borderColor: innerColor,
      startAngle: - Math.PI / 2,
      endAngle: - Math.PI / 2 + 2 * Math.PI * (progress / 100),
      anticlockwise: false,
    });

    this.container.addChild(bgBar);
    this.container.addChild(progressBar);
  };

  _renderPercent = (data) => {
    const { progress, fontSize, color } = data;

    let percent = new Text({
      value: `${parseInt(progress)}%`,
      fontSize,
      fill: color,
      top: 0,
      left: 0,
    });
    percent.x = (this.container.width - percent.width) / 2;
    percent.y = (this.container.height - percent.height) / 2;

    this.container.addChild(percent);
  }
}
